<template>
    <div class="product-page-container">
        <div class="grid_c1 product-container">
            <!-- 商品图片预览区域 -->
            <section class="product-gallery">
                <div class="main-commodityPicture-container">
                    <div class="commodityPicture-wrapper">
                        <!-- 视频标识 -->
                        <div class="media-indicator">
                            <span class="video-icon"></span>
                        </div>
                        <!-- 主商品图片 -->
                        <img class="product-commodityPicture" width="500" height="500" :src="arr.commodityPicture"
                            :alt="arr.commodityName" :data-origin="arr.commodityPicture" @error="handleImageError">
                    </div>
                    <!-- 缩略图导航 -->
                    <div class="thumbnail-nav">
                        <div class="thumbnail active">
                            <img :src="arr.commodityPicture" alt="缩略图">
                        </div>
                        <div class="thumbnail">
                            <img :src="arr.commodityPicture" alt="缩略图">
                        </div>
                        <div class="thumbnail">
                            <img :src="arr.commodityPicture" alt="缩略图">
                        </div>
                    </div>
                </div>
            </section>

            <!-- 商品信息区域 -->
            <section class="product-details">
                <div class="product-header">
                    <h1 class="product-title">
                        <img class="store-badge"
                            src="//img30.360buyimg.com/devfe/jfs/t1/21675/3/14002/1234/5ca40b02E035d9b5d/b92345927bc9abbf.png"
                            alt="门店有售">
                        {{ arr.commodityName }}
                    </h1>
                    <div class="product-subtitle">优质精选商品 · 厂家直供 · 正品保证</div>
                </div>

                <!-- 价格区域 -->
                <div class="price-section">
                    <div class="price-row">
                        <div class="price-label">麦 子 价</div>
                        <div class="price-value">
                            <span class="currency">￥</span>
                            <span class="amount">{{ arr.price }}</span>
                            <span class="price-tag">特价</span>
                        </div>
                    </div>
                    <div class="price-promo">
                        <span class="promo-tag">优惠</span>
                        <span class="promo-text">满199减20 · 满299减50</span>
                    </div>
                </div>

                <!-- 服务保障 -->
                <div class="service-guarantee">
                    <div class="service-item">
                        <i class="iconfont icon-quality"></i>
                        <span>正品保障</span>
                    </div>
                    <div class="service-item">
                        <i class="iconfont icon-delivery"></i>
                        <span>极速配送</span>
                    </div>
                    <div class="service-item">
                        <i class="iconfont icon-return"></i>
                        <span>7天无理由退换</span>
                    </div>
                </div>

                <!-- 商品规格 -->
                <div class="product-specs">
                    <div class="spec-item">
                        <span class="spec-label">规格：</span>
                        <div class="spec-options">
                            <span class="spec-option active">标准装</span>
                            <span class="spec-option">家庭装</span>
                            <span class="spec-option">礼盒装</span>
                        </div>
                    </div>
                </div>
                <el-dialog title="扫码支付" :visible.sync="qrDialogVisible" width="30%" center
                    :before-close="handleCloseDialog">
                    <div class="qr-code-container">
                        <div v-if="qrCodeUrl" class="qr-code-wrapper">
                            <img :src="this.qrCodeUrl" alt="支付二维码">
                            <p class="qr-instruction">请使用支付宝扫描二维码完成支付</p>
                            <p class="qr-amount">支付金额: ￥{{ totalPrice || '0.00' }}</p>
                        </div>
                        <div v-else class="loading-wrapper">
                            <el-button type="primary" :loading="qrLoading">正在生成支付二维码...</el-button>
                        </div>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="qrDialogVisible = false">取消支付</el-button>
                    </span>

                </el-dialog>

                <!-- 数量选择 -->
                <div class="quantity-selector">
                    <span class="quantity-label">数量：</span>
                    <div class="quantity-control">
                        <button class="quantity-btn minus" @click="goodsNum--" :disabled="goodsNum == 1">-</button>
                        <input type="number" class="quantity-input" :value="goodsNum" min="1">
                        <button class="quantity-btn plus" @click="goodsNum++">+</button>
                    </div>
                    <span class="stock-info" :class="{ 'low-stock': (arr.goodsNum || 0) < 10 }">
                        库存：{{ arr.goodsNum || 0 }}件
                        <span v-if="(arr.goodsNum || 0) < 10" class="stock-warning">(库存紧张)</span>
                    </span> <span class="total-price-hint">支付金额: ￥{{ totalPrice || '0.00' }}</span>
                </div>
                <el-dialog title="选择优惠券" :visible.sync="couponDialogVisible" width="600px" center>
                    <el-radio-group v-model="selectedCouponId" class="coupon-list">
                        <el-radio v-for="coupon in coupons" :key="coupon.id" :label="coupon.id" class="coupon-item"
                            @click.native.prevent="toggleCoupon(coupon.id)" :disabled="isCouponDisabled(coupon)">
                            <div class="coupon-card" :class="couponStatusClass(coupon)">
                                <div class="coupon-header">
                                    <span class="amount">
                                        <template v-if="coupon.couponType === 1">
                                            ￥{{ coupon.discountAmount }}
                                        </template>
                                        <template v-else-if="coupon.couponType === 2">
                                            {{ (coupon.discountRate * 10).toFixed(1) }}折
                                        </template>
                                        <template v-else-if="coupon.couponType === 3">
                                            ￥{{ coupon.discountAmount }}
                                        </template>
                                    </span>
                                    <div class="coupon-type">
                                        {{ couponTypeMap[coupon.couponType] }}
                                    </div>
                                </div>

                                <div class="coupon-body">
                                    <div class="coupon-name">{{ coupon.couponName }}</div>
                                    <div class="condition" v-if="coupon.minAmount">
                                        满{{ coupon.minAmount }}元可用
                                    </div>
                                    <!-- <div class="expire">
                                        有效期至：{{ dayjs(coupon.endTime).format('YYYY-MM-DD HH:mm') }}
                                    </div> -->
                                </div>
                            </div>
                        </el-radio>
                    </el-radio-group>

                    <div slot="footer" class="dialog-footer">
                        <el-button @click="couponDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="handleConfirmCoupon">
                            {{ selectedCouponId ? '确 定' : '不使用优惠券' }}
                        </el-button>
                    </div>
                </el-dialog>

                <!-- 交互按钮 -->
                <div class="action-buttons">
                    <button class="add-to-cart" @click="AddShoppingcar">
                        <i class="iconfont icon-cart"></i> 加入购物车
                    </button>
                    <button class="buy-now" @click="handleCheckout">
                        <i class="iconfont icon-bolt"></i> 立即购买
                    </button>
                    <button class="favorite-btn">
                        <i class="iconfont icon-heart"></i> 收藏
                    </button>
                    <button class="favorite-btn" @click="selectCoupon">
                        <i class="iconfont icon-heart"></i> 查看优惠劵
                    </button>
                </div>
            </section>
        </div>


        <!-- 商品详情区域 -->
        <div class="product-tabs">
            <div class="tab-header">
                <div class="tab-item active">商品详情</div>
                <div class="tab-item">规格参数</div>
                <div class="tab-item">包装售后</div>
            </div>
            <div class="tab-content">
                <div class="product-description">
                    <h3>商品描述</h3>
                    <p>这里是商品的详细描述内容，可以介绍商品的特点、材质、使用方法等详细信息。</p>
                    <div class="detail-commodityPictures">
                        <img src="https://via.placeholder.com/800x600" alt="商品详情图">
                        <img src="https://via.placeholder.com/800x600" alt="商品详情图">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { setStoreId } from '@/api/admin/store';
import { ShowCommodity, addShoppingcar } from '@/api/user/cart';
import { addOrder } from '@/api/user/order';
import { getUser, setUser } from '@/api/admin/User';

import { getCouponByUserId } from '@/api/user/coupon';
import request from "@/utils/request";
export default {
    data() {
        return {
            couponDialogVisible: false,
            coupons: [], // 优惠券列表
            couponTypeMap: {
                1: '满减券',
                2: '折扣券',
                3: '立减券'
            },
            arr: [],
            isCouponSelected: false, // 新增状态跟踪
            goodsNum: 1,
            qrLoading: false,
            qrCodeUrl: '',
            qrDialogVisible: false,
            selectedCouponId: null,
            infoFrom: {
                carNum: 0,
                id: JSON.parse(getUser()).id,
            },
            currtentGoodsId: -1
        }
    }, computed: {
        palTotal() {
            try {
                // 确保price和goodsNum是有效数字
                const price = parseFloat(this.arr?.price) || 0;
                const quantity = parseInt(this.goodsNum) || 1;

                // 计算结果并保留2位小数
                const total = price * quantity;
                return parseFloat(total.toFixed(2));
            } catch (error) {
                console.error('计算总价出错:', error);
                return 0;
            }
        },

        // 优惠后价格
        totalPrice() {
            try {
                // 如果没有选择优惠券或优惠券无效，返回原始价格
                if (!this.selectedCoupon || !this.selectedCoupon.couponType) {
                    return this.palTotal;
                }
                const originalPrice = this.palTotal;
                let finalPrice = originalPrice;

                switch (this.selectedCoupon.couponType) {
                    case 1: // 满减券
                        const minAmount = parseFloat(this.selectedCoupon.minAmount) || 0;
                        if (originalPrice >= minAmount) {
                            finalPrice -= parseFloat(this.selectedCoupon.discountAmount) || 0;
                        }
                        break;

                    case 2: // 折扣券
                        const discountRate = parseFloat(this.selectedCoupon.discountRate) || 1;
                        finalPrice *= discountRate;
                        break;

                    case 3: // 立减券
                        finalPrice -= parseFloat(this.selectedCoupon.discountAmount) || 0;
                        break;
                }

                // 确保价格不会低于0
                finalPrice = Math.max(0, finalPrice);

                // 返回保留2位小数的结果
                return parseFloat(finalPrice.toFixed(2));

            } catch (error) {
                console.error('计算优惠价格出错:', error);
                return this.palTotal;
            }
        }
    },
    methods: {

        handleImageError(e) {
            // 图片加载失败时使用备用图
            e.target.src = 'https://placehold.co/500x500?text=Image+Not+Found'
        },

        async AddShoppingcar() {
            console.log('this.arr.id', this.currtentGoodsId);

            addShoppingcar(this.currtentGoodsId).then(res => {
                if (res.data.code === 1) {
                    let user = JSON.parse(getUser())
                    this.infoFrom.carNum = user.carNum + 1
                    user.carNum = user.carNum + 1
                    setUser(JSON.stringify(user))
                    this.$message({
                        type: 'success',
                        message: '已成功加入购物车'
                    })
                } else {
                    this.$message({
                        type: 'info',
                        message: res.data.msg
                    })
                }
            })
        },

        async handleCheckout() {
            try {
                this.qrLoading = true;
                this.qrDialogVisible = true;

                // 1. 构造订单数据
                const orderItems = [{
                    storeId: this.arr.shopId,
                    quantity: this.goodsNum || 1,
                    image: this.arr.commodityPicture,
                    goodsId: this.arr.id,
                    price: this.arr.price
                }];

                // 2. 区分普通订单/秒杀订单
                const isSeckill = this.arr.isSeckill;
                const type = isSeckill == 0 ? 'normal' : 'seckill';

                // 3. 提交订单并获取支付二维码
                const qrRes = await addOrder({
                    orderDTOS: orderItems,
                    moneyCount: this.totalPrice,
                    couponOrder: this.selectedCoupon
                }, type);

                if (!qrRes?.data) {
                    throw new Error('获取支付二维码失败: 响应数据无效');
                }

                // 4. 显示二维码
                this.qrCodeUrl = `${qrRes.data[1]}?x-oss-process=image`;

                // 5. 轮询检查支付状态（带重试限制）
                const MAX_RETRY = 5; // 最大重试次数（30次 × 2秒 = 60秒）
                const RETRY_INTERVAL = 2000; // 轮询间隔2秒
                let retryCount = 0;

                const checkPayment = async () => {
                    try {
                        const { data } = await request({
                            url: `/user/Order/checkOrder/${type}`,
                            method: 'get',
                            params: { payOrderId: qrRes.data[0] }
                        });

                        if (data) {
                            // 支付成功
                            this.$message.success('支付成功');
                            this.qrDialogVisible = false;
                            let user = JSON.parse(getUser())
                            user.carNum = user.carNum - this.selectedItems.length
                            setUser(JSON.stringify(user))
                            this.$router.push('/orders');
                            return; // 终止轮询
                        }

                        // 未支付完成，继续重试
                        if (retryCount < MAX_RETRY) {
                            retryCount++;
                            setTimeout(checkPayment, RETRY_INTERVAL);
                        } else {
                            // 超过最大重试次数
                            this.$message.warning('支付超时，请检查支付状态');
                            this.qrDialogVisible = false;
                        }
                    } catch (error) {
                        console.error("检查支付状态出错", error);
                        if (retryCount < MAX_RETRY) {
                            retryCount++;
                            setTimeout(checkPayment, RETRY_INTERVAL);
                        } else {
                            this.$message.error('支付状态检查失败');
                            this.qrDialogVisible = false;
                        }
                    }
                };

                // 首次触发轮询
                setTimeout(checkPayment, RETRY_INTERVAL);
            } catch (error) {
                console.error('支付流程出错:', error);
                this.$message.error(error.message || '支付失败，请重试');
                this.qrDialogVisible = false;
            } finally {
                this.qrLoading = false;
            }
        }, handleCloseDialog(done) {
            if (this.qrLoading) {
                this.$message.warning('正在生成二维码，请稍候');
                return false;
            }
            done();
        }, async selectCoupon() {
            if (this.coupons.length != 0) {
                console.log("this.coupons", this.coupons)
                this.couponDialogVisible = true;
            }
            else {
                try {
                    const res = await getCouponByUserId();
                    this.coupons = res.data.data;
                    console.log('res.data', this.coupons);
                    this.couponDialogVisible = true;
                    this.selectedCouponId = null;
                } catch (error) {
                    this.$message.error('获取优惠券失败');
                }
            }

        },
        // 确认选择优惠券
        toggleCoupon(couponId) {
            if (this.selectedCouponId === couponId) {
                // 如果点击已选中的优惠券，则取消选择
                this.selectedCouponId = null;
            } else {
                // 否则选择新的优惠券
                this.selectedCouponId = couponId;
            }
        },

        // 确认选择
        handleConfirmCoupon() {
            this.couponDialogVisible = false;
            if (this.selectedCouponId) {
                this.selectedCoupon = this.coupons.find(c => c.id === this.selectedCouponId);
                this.$message.success('优惠券已应用');
            } else {
                this.selectedCoupon = null;
                this.$message.info('未使用优惠券');
            }
        },
        // 判断优惠券是否可用
        isCouponDisabled(coupon) {
            // 根据业务逻辑添加禁用条件，例如：
            // 1. 优惠券已过期
            // 2. 订单金额不满足最低消费
            // return dayjs().isAfter(coupon.endTime);
        },

        // 优惠券状态样式
        couponStatusClass(coupon) {
            return {
                'disabled': this.isCouponDisabled(coupon),
                // 'expiring': dayjs().add(3, 'day').isAfter(coupon.endTime)
            };
        },
        a() {
            ShowCommodity().then(res => {
                this.arr = res.data
                console.log(this.arr);

                setStoreId(this.arr.shopId)
            })
        }
    },
    mounted() {
        this.a()
        const goodsId = this.$route.params.goodsId
        console.log('goodis', goodsId);
        if (goodsId == null || goodsId == '') {
            this.$message.error('无效的用户商品ID')
            this.$router.back()
        }
        this.currtentGoodsId = goodsId
    }
}
</script>

<style lang="less" scoped>
// 颜色变量
@primary-color: #f90;
@price-color: #e4393c;
@button-bg: @primary-color;
@border-color: #e0e0e0;
@danger-color: #F56C6C;
@text-color: #333;
@text-secondary: #666;
@text-light: #999;
@background-light: #f5f5f5;
@background-lighter: #fafafa;

.product-page-container {
    background-color: #fff;
    padding-bottom: 40px;
}

/* 优惠券弹窗样式 */
.coupon-list {
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    padding: 10px;
}

.coupon-item {
    display: block;
    margin-bottom: 15px;
    position: relative;

    &:last-child {
        margin-bottom: 0;
    }

    /deep/ .el-radio__input {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        z-index: 2;
    }

    /deep/ .el-radio__label {
        display: block;
        padding-left: 0;
        width: 100%;
    }
}

.coupon-card {
    position: relative;
    display: flex;
    border: 1px solid @border-color;
    border-radius: 8px;
    padding: 15px;
    background: linear-gradient(135deg, #fff5f5, #fff);
    transition: all 0.3s;
    cursor: pointer;

    &:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    &.disabled {
        opacity: 0.6;
        background: #f5f5f5;
        cursor: not-allowed;
    }

    &.expiring {
        border-color: #ffba00;
        background: linear-gradient(135deg, #fff7e6, #fff);
    }
}

.coupon-header {
    width: 120px;
    text-align: center;
    border-right: 1px dashed @border-color;
    padding-right: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .amount {
        font-size: 28px;
        color: @danger-color;
        font-weight: bold;
        line-height: 1.2;
    }

    .coupon-type {
        color: #666;
        font-size: 12px;
        margin-top: 5px;
    }
}

.coupon-body {
    flex: 1;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .coupon-name {
        font-size: 16px;
        color: @text-color;
        margin-bottom: 8px;
        font-weight: 500;
    }

    .condition {
        color: @text-secondary;
        font-size: 12px;
        margin-bottom: 5px;
    }

    .expire {
        color: @text-light;
        font-size: 12px;
    }
}

.disabled .coupon-body {

    .coupon-name,
    .condition,
    .expire {
        color: #ccc;
    }
}

/* 弹窗底部按钮 */
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
    border-top: 1px solid @border-color;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .coupon-card {
        flex-direction: column;
    }

    .coupon-header {
        width: 100%;
        border-right: none;
        border-bottom: 1px dashed @border-color;
        padding-right: 0;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    /deep/ .el-radio__input {
        right: 10px;
    }
}

.quantity-selector {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    position: relative;

    .quantity-label {
        font-size: 14px;
        color: @text-secondary;
        margin-right: 15px;
    }

    .quantity-control {
        display: flex;
        align-items: center;
        margin-right: 20px;
    }

    .quantity-btn {
        width: 28px;
        height: 28px;
        border: 1px solid @border-color;
        background: #fff;
        font-size: 16px;
        color: @text-secondary;
        cursor: pointer;
        transition: all 0.2s;

        &:hover {
            border-color: @primary-color;
            color: @primary-color;
        }

        &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        &.minus {
            border-radius: 4px 0 0 4px;
        }

        &.plus {
            border-radius: 0 4px 4px 0;
        }
    }

    .quantity-input {
        width: 50px;
        height: 28px;
        border-top: 1px solid @border-color;
        border-bottom: 1px solid @border-color;
        border-left: none;
        border-right: none;
        text-align: center;
        font-size: 14px;
        color: @text-color;
        -moz-appearance: textfield;

        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    }

    .stock-info {
        font-size: 13px;
        color: @text-light;
        margin-right: 20px;
    }

    .total-price-hint {
        font-size: 16px;
        color: @danger-color;
        font-weight: bold;
        margin-left: auto;
    }
}

.grid_c1.product-container {
    margin: 0 auto;
    width: 1200px;
    display: flex;
    margin-top: 20px;
    gap: 40px;
    align-items: flex-start;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

    @media (max-width: 768px) {
        flex-direction: column;
        width: 100%;
        padding: 15px;
        gap: 20px;
    }
}

/* 二维码支付弹窗样式 */
.qr-code-container {
    text-align: center;
    padding: 20px;

    .qr-code-wrapper {
        img {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            display: block;
            border: 1px solid #eee;
        }

        .qr-instruction {
            margin-top: 15px;
            color: #666;
            font-size: 14px;
        }

        .qr-amount {
            margin-top: 10px;
            color: @danger-color;
            font-size: 16px;
            font-weight: bold;
        }
    }

    .loading-wrapper {
        padding: 50px 0;
    }
}


.product-gallery {
    flex: 0 0 500px;
    position: relative;

    @media (max-width: 768px) {
        flex: none;
        width: 100%;
    }

    .main-commodityPicture-container {
        border: 1px solid @border-color;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        background: @background-lighter;
        margin-bottom: 15px;

        .media-indicator {
            position: absolute;
            top: 12px;
            left: 12px;
            z-index: 2;

            .video-icon {
                display: block;
                width: 32px;
                height: 32px;
                background: rgba(0, 0, 0, 0.5) url('data:commodityPicture/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"/></svg>') no-repeat center;
                border-radius: 50%;
                transition: opacity 0.3s;

                &:hover {
                    opacity: 0.8;
                }
            }
        }

        .product-commodityPicture {
            display: block;
            width: 100%;
            height: auto;
            transition: transform 0.3s;
            background: #fff;
            object-fit: contain;

            &:hover {
                transform: scale(1.02);
            }
        }
    }

    .thumbnail-nav {
        display: flex;
        gap: 10px;
        padding: 5px 0;

        .thumbnail {
            width: 60px;
            height: 60px;
            border: 1px solid @border-color;
            border-radius: 4px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s;
            background: #fff;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            &:hover {
                border-color: @primary-color;
            }

            &.active {
                border-color: @primary-color;
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 2px;
                    background: @primary-color;
                }
            }
        }
    }
}

.product-details {
    flex: 1;
    min-width: 300px;

    .product-header {
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid @border-color;
    }

    .product-title {
        font-size: 22px;
        color: @text-color;
        line-height: 1.4;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        font-weight: 600;

        .store-badge {
            height: 20px;
            margin-right: 10px;
        }
    }

    .product-subtitle {
        font-size: 14px;
        color: @text-secondary;
    }
}

.price-section {
    background: @background-light;
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 20px;

    .price-row {
        display: flex;
        align-items: flex-end;
        margin-bottom: 8px;
    }

    .price-label {
        font-size: 14px;
        color: @text-secondary;
        margin-right: 10px;
    }

    .price-value {
        display: flex;
        align-items: baseline;

        .currency {
            font-size: 20px;
            color: @price-color;
            font-weight: bold;
        }

        .amount {
            font-size: 28px;
            font-weight: 700;
            color: @price-color;
            margin-left: 2px;
        }

        .price-tag {
            background: @price-color;
            color: #fff;
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 3px;
            margin-left: 8px;
            transform: translateY(-2px);
        }
    }

    .price-promo {
        display: flex;
        align-items: center;
        margin-top: 8px;

        .promo-tag {
            background: @price-color;
            color: #fff;
            font-size: 12px;
            padding: 1px 4px;
            border-radius: 2px;
            margin-right: 8px;
        }

        .promo-text {
            font-size: 13px;
            color: @price-color;
        }
    }
}

.service-guarantee {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid @border-color;

    .service-item {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: @text-secondary;

        .iconfont {
            margin-right: 5px;
            color: @primary-color;
            font-size: 16px;
        }
    }
}

.product-specs {
    margin-bottom: 20px;

    .spec-item {
        margin-bottom: 15px;

        .spec-label {
            font-size: 14px;
            color: @text-secondary;
            margin-right: 10px;
        }

        .spec-options {
            display: flex;
            gap: 10px;
            margin-top: 8px;
        }

        .spec-option {
            padding: 6px 12px;
            border: 1px solid @border-color;
            border-radius: 4px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;

            &:hover {
                border-color: @primary-color;
                color: @primary-color;
            }

            &.active {
                border-color: @primary-color;
                background: fadeout(@primary-color, 90%);
                color: @primary-color;
            }
        }
    }
}

.quantity-selector {
    display: flex;
    align-items: center;
    margin-bottom: 25px;

    .quantity-label {
        font-size: 14px;
        color: @text-secondary;
        margin-right: 15px;
    }

    .quantity-control {
        display: flex;
        align-items: center;
        margin-right: 20px;
    }

    .quantity-btn {
        width: 28px;
        height: 28px;
        border: 1px solid @border-color;
        background: #fff;
        font-size: 16px;
        color: @text-secondary;
        cursor: pointer;
        transition: all 0.2s;

        &:hover {
            border-color: @primary-color;
            color: @primary-color;
        }

        &.minus {
            border-radius: 4px 0 0 4px;
        }

        &.plus {
            border-radius: 0 4px 4px 0;
        }
    }

    .quantity-input {
        width: 50px;
        height: 28px;
        border-top: 1px solid @border-color;
        border-bottom: 1px solid @border-color;
        border-left: none;
        border-right: none;
        text-align: center;
        font-size: 14px;
        color: @text-color;
        -moz-appearance: textfield;

        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    }

    .stock-info {
        font-size: 13px;
        color: @text-light;
    }
}

.action-buttons {
    display: flex;
    gap: 15px;
    margin-top: 30px;

    .add-to-cart,
    .buy-now,
    .favorite-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 24px;
        font-size: 16px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
        border: none;

        .iconfont {
            margin-right: 6px;
            font-size: 16px;
        }
    }

    .add-to-cart {
        background: @primary-color;
        color: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

        &:hover {
            background: darken(@primary-color, 8%);
            transform: translateY(-1px);
        }

        &:active {
            transform: translateY(1px);
        }
    }

    .buy-now {
        background: @price-color;
        color: white;

        &:hover {
            background: darken(@price-color, 8%);
        }
    }

    .favorite-btn {
        background: #fff;
        border: 1px solid @border-color;
        color: @text-secondary;

        &:hover {
            color: @price-color;
            border-color: @price-color;
        }
    }
}

.product-tabs {
    max-width: 1200px;
    margin: 30px auto 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;

    .tab-header {
        display: flex;
        border-bottom: 1px solid @border-color;

        .tab-item {
            padding: 15px 25px;
            font-size: 16px;
            color: @text-secondary;
            cursor: pointer;
            position: relative;
            transition: all 0.2s;

            &:hover {
                color: @primary-color;
            }

            &.active {
                color: @primary-color;
                font-weight: 600;

                &::after {
                    content: '';
                    position: absolute;
                    bottom: -1px;
                    left: 0;
                    right: 0;
                    height: 2px;
                    background: @primary-color;
                }
            }
        }
    }

    .tab-content {
        padding: 25px;

        .product-description {
            h3 {
                font-size: 18px;
                color: @text-color;
                margin-bottom: 15px;
                padding-bottom: 10px;
                border-bottom: 1px solid @border-color;
            }

            p {
                font-size: 14px;
                color: @text-secondary;
                line-height: 1.8;
                margin-bottom: 20px;
            }

            .detail-commodityPictures {
                img {
                    max-width: 100%;
                    margin-bottom: 15px;
                    display: block;
                }
            }
        }
    }
}

// 响应式调整
@media (max-width: 768px) {
    .product-tabs {
        margin: 20px 15px 0;
        border-radius: 0;

        .tab-header {
            overflow-x: auto;
            white-space: nowrap;

            .tab-item {
                padding: 12px 20px;
                font-size: 14px;
            }
        }

        .tab-content {
            padding: 15px;
        }
    }

    .action-buttons {
        flex-wrap: wrap;

        button {
            flex: 1 1 45%;
            margin-bottom: 10px;
        }
    }
}

/* 移动端适配 */
@media (max-width: 768px) {
    /deep/ .el-dialog {
        width: 90% !important;
    }
}
</style>